<template>
  <div id="mydialog">
    <el-dialog :title="title" 
      :visible.sync="dialogFormVisible"
      :before-close="closeDialog">
      
      <el-form ref="codeModelDialogForm" 
        :model="codeModelDialogForm" 
        label-width="80px" 
        class="selectForm" 
        :rules="rules">
        <el-row :gutter="24">
          <el-col :span="12">

            <el-form-item label="代码标识" prop="codeType">
              <el-input v-model="codeModelDialogForm.codeType" placeholder="代码标识" />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="名称" prop="name">
              <el-input v-model="codeModelDialogForm.name" placeholder="名称"/>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row :gutter="24" class="marginTop">
          <el-col :span="12">

            <el-form-item label="模型类型" prop="seqType">
              <bms-select v-model="codeModelDialogForm.seqType" codeType="CODE_MODEL_TYPE_DICT" :placeholder="'请选择模型类型'"></bms-select>
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="分类" prop="categories">
              <bms-select v-model="codeModelDialogForm.categories" codeType="CODE_MODEL_CATEGROIES_DICT" :placeholder="'请选择分类'"></bms-select>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row>
          <!-- 根据选择的模型类型出现不同的展示形式 -->
          <template v-if="codeModelDialogForm.seqType == 'dict'">
            <el-form-item label="字典引用" prop="referenceCode">
              <bms-select v-model="codeModelDialogForm.referenceCode" codeType="reference_code_seq" :placeholder="'请选择字典引用'"></bms-select>
            </el-form-item>
          </template>
          <template v-else>
            <el-form-item label="SQL" prop="sqlText">
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 6}"
                v-model="codeModelDialogForm.sqlText"
                show-word-limit>
              </el-input>
            </el-form-item>
          </template>
        </el-row>

        <el-row :gutter="24">

          <el-col :span="12">

            <el-form-item label="显示字段" prop="textField">
              <el-input v-model="codeModelDialogForm.textField" placeholder="显示字段" />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="值字段" prop="valueField">
              <el-input v-model="codeModelDialogForm.valueField" placeholder="值字段"/>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row :gutter="24">
          <el-col :span="12">

            <el-form-item label="排序" prop="orderBy">
              <el-input v-model="codeModelDialogForm.orderBy" placeholder="排序" />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="缓存时间" prop="cachePageTime">
              <el-input v-model="codeModelDialogForm.cachePageTime" placeholder="缓存时间"/>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="启用" prop="enable">
              <el-switch
                v-model="codeModelDialogForm.enable"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </el-form-item>
          </el-col>
          
        </el-row>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <template v-if="codeModelDialogForm.seqType !== 'dict'">
          <el-button type="warning" @click="compileRun()">编译验证</el-button>
        </template>
        <el-button @click="closeDialog()">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import BmsSelect from '@/components/quick/ui/bms-select.vue'
import {
  addCodeModel,updateCodeModel,checkCodeName,checkCodeType,compileRun
} from '@/assets/request/api'
export default {
  name: 'mydialog',
  components: { BmsSelect },
  data() {
    var validateCodeType = (rule, value, callback) => {
      if(value === '') {
        callback(new Error("请输入代码标识"))
      }
      let id = this.codeModelDialogForm.id ? this.codeModelDialogForm.id : ""
      checkCodeType(value,id).then(res => {
        callback()
      }).catch(err => {
        callback(new Error(err.message))
      })
    };
    var validateName = (rule, value, callback) => {
      if(value === '') {
        callback(new Error("请输入代码名称"))
      }
      let id = this.codeModelDialogForm.id ? this.codeModelDialogForm.id : ""
      checkCodeName(value,id).then(res => {
        callback()
      }).catch(err => {
        callback(new Error(err.message))
      })
    };
    return {
      dialogFormVisible: false,
      codeModelDialogForm: {
        enable: true
      },
      title: "新增",
      formLabelWidth: '120px',
      referenceCodes: [],
      rules: {
        codeType: [
          { required: true, validator: validateCodeType, trigger: 'blur' }
        ],
        name: [
          { required: true, validator: validateName, trigger: 'blur' }
        ],
        seqType: [
          { required: true, message: '请选择模型类型', trigger: 'blur' }
        ],
        categories: [
          { required: true, message: '请选择分类', trigger: 'blur' }
        ],
        referenceCode: [
          { required: true, message: '请选择字典引用', trigger: 'blur' }
        ],
        sqlText: [
          { required: true, message: '请填写sql语句', trigger: 'blur' }
        ],
        textField: [
          { required: true, message: '请填写显示字段', trigger: 'blur' }
        ],
        valueField: [
          { required: true, message: '请填写值字段', trigger: 'blur' }
        ],
        cachePageTime: [
          { required: true, message: '请填写缓存时间', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    receiveParent(row) {
      if(row) {
        this.codeModelDialogForm = JSON.parse(JSON.stringify(row))
        // 设置数据格式
        this.codeModelDialogForm.categories = this.codeModelDialogForm.categories + ""
        this.title = "编辑"
      }
      this.dialogFormVisible = true
    },
    changeReferenceCode(value) {
      this.codeModelDialogForm.referenceCode = value 
    },
    addCodeModel(row) {
      addCodeModel(row).then(res => {
        this.$message({
          message: '新增成功',
          type: 'success'
        });
        this.dialogFormVisible = false
        this.$emit("refreshData")
      }).catch(err => {
        this.$message({
          message: err.message,
          type: 'error'
        });
      })
    },
    updateCodeModel(row) {
      updateCodeModel(row).then(res => {
        this.$message({
          message: '更新成功',
          type: 'success'
        });
        this.dialogFormVisible = false
        this.$emit("refreshData")
      }).catch(err => {
        this.$message({
          message: err.message,
          type: 'error'
        });
      })
    },
    submit() {
      if(this.title === '新增') {
        this.addCodeModel(this.codeModelDialogForm)
      } else {
        this.updateCodeModel(this.codeModelDialogForm)
      }
    },
    closeDialog() {
      this.dialogFormVisible = false
      this.$refs['codeModelDialogForm'].clearValidate()
      this.codeModelDialogForm = {enable: true}
    },
    compileRun() {
      compileRun(this.codeModelDialogForm).then(res => {
        _g.toastMsg("success","验证成功")
      }).catch(err => {
        _g.toastMsg("error",err.message)
      })
    }
  },
  watch: {
    'codeModelDialogForm.seqType': {
      handler(newValue,oldValue) {
        if(newValue === 'dict') {
          this.codeModelDialogForm.textField = "dictName"
          this.codeModelDialogForm.valueField = "dictValue"
        }
      }
    },
  }
}
</script>

<style lang="scss" scoped>

.selectForm /deep/ .el-form-item__label {
  font-size: 12px;
}

.el-form-item{
  margin-bottom: 0px;
}

.el-input /deep/ .el-input__inner{ 
  height: 32px;
  font-size: 13px;
  box-shadow: none;
  border: 1px solid #e9e9e9;
}

.el-row {
  margin-top: 2vh;
}

.el-button {
  line-height: 0px;
  height: 32px;
  padding: 12px;
  font-size: 2px;
  border-radius: 20px;
}

//对整个容器进行设置
.el-select /deep/ .el-input__inner {
  height: 32px;
}



</style>